<template>
  <div class="bg-#EEF2F7 pt-83 pb-70">
    <div text-center>
      <h1 text-40>热门<span class="text-#448BF5">问题</span></h1>
      <div class="text-#5F6368 text-18 mt-20 mb-38">用户最常遇到的问题和解决方案</div>
    </div>
    <div flex px-186 gap-150>
      <div flex-1>
        <h3 class="text-#5F6368 text-25 mb-16">新闻资讯</h3>
        <el-collapse v-model="active1" @change="" w-full  m-auto>
          <el-collapse-item v-for="(i, idx) in news" :title="i.title" :name="i.value" :key="i.id">
            {{ i.content }}
          </el-collapse-item>
        </el-collapse>
      </div>
      <div flex-1>
        <h3 class="text-#5F6368 text-25 mb-16">官方公告</h3>
        <el-collapse v-model="active2" @change="" w-full m-auto>
          <el-collapse-item v-for="(i, idx) in announcements" :title="i.title" :name="i.value" :key="i.id">
            {{ i.content }}
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import API from '@/request/api/index'

const active1 = ref([])
const active2 = ref([])
const news = ref([] as any[])
const announcements = ref([] as any[])

onMounted(() => {
  API.getArticles({ type: 'news' }).then(res => {
    news.value = res.data
  })
  API.getArticles({ type: 'announcement' }).then(res => {
    announcements.value = res.data
  })
})

</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
  padding: 0 32px;
  border-radius: 10px;
  border-bottom: 1px solid #E0E0E0;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
  font-size: 19px;
  height: 79px;
}
:deep(.el-collapse-item__wrap) {
  padding: 32px;
  border-radius: 10px;
}
:deep(.el-collapse-item) {
  margin-bottom: 18px;
}
</style>
